<template>
    <h2>优惠券显示</h2>
    折扣劵标题:
    <input type="text" v-model="Tittle"/>
    <input type="button" value="查询" @click="Show"/>
    <table border="1">
        <thead>
            <tr>
                <td>折扣劵编号</td>
                <td>折扣劵标题</td>
                <td>折扣劵颜色</td>
                <td>剩余库存量</td>
                <td>每人限领</td>
                <td>使用条件</td>
                <td>折扣</td>
                <td>开始时间</td>
                <td>截止时间</td>
                <td>适用业务</td>
                <td>使用须知</td>
                <td>客服电话</td>
                <td>图片</td>
                <td>门店</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.Discount_Id}}</td>
                <td>{{item.Discount_Tittle}}</td>
                <td>{{item.Discount_Color}}</td>
                <td>{{item.Discount_Num}}</td>
                <td>{{item.Discount_Limited}}</td>
                <td>{{item.Discount_Use}}</td>
                <td>{{item.Discount_Discount}}</td>
                <td>{{item.Discount_StartTime}}</td>
                <td>{{item.Discount_EndTime}}</td>
                <td>{{item.Discount_Business}}</td>
                <td>{{item.Discount_Precautions}}</td>
                <td>{{item.Discount_Phone}}</td>
                <td><img :src="item.ImgUrl" style="width:70px;height:80px;" /></td>
                <td>{{item.Shop_Id}}</td>
            </tr>
        </tbody>
    </table>

    总共有{{pageInfo.totalCount}}条数据
    总共有{{pageInfo.pageCount}}页
    当前第{{pageInfo.pageIndex}}/{{pageInfo.pageCount}}页

    <a href="#" @click="Fan('F')">首页</a>
    <a href="#" @click="Fan('L')">上一页</a>
    <a href="#" @click="Fan('N')">下一页</a>
    <a href="#" @click="Fan('E')">尾页</a>

</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';

    const info=ref({
    Discount_Id: 0,
    Discount_Tittle: "",
    Discount_Color: "",
    Discount_Num: 0,
    Discount_Limited: 0,
    Discount_Use: "",
    Discount_Discount: 0,
    Discount_StartTime: "",
    Discount_EndTime: "",
    Discount_Business: "",
    Discount_Precautions: "",
    Discount_Phone: "",
    ImgUrl:"",
    Shop_Id: 0
    });

     const xia=ref({
        Shop_Id:0,
        Shop_Name:""
    });

    onMounted(()=>{
        XiaLa();
        Show();
    });

    const pageInfo = ref({
        TotalCount:0,
        PageCount:0,
        PageIndex:1,
        PageSize:2
    });

    const XiaLa=()=>{
        axios.get("https://localhost:7153/api/Member/GetShopXialA/GetShopXialA")
        .then(res=>{
            xia.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const Tittle=ref("");

    const Show=()=>{
        axios.get("https://localhost:7153/api/Member/GetDiscount/GetDiscount",{
            params:{
                PageIndex:pageInfo.value.PageIndex,
                PageSize:pageInfo.value.PageSize,
                discount_Tittle:Tittle.value
                //pageInfo.value.PageSize
            }
        })
        .then(res=>{
            console.log(res.data.Data_Info);
            info.value=res.data.Data_Info;
            pageInfo.PageCount=res.data.PageCount;
            pageInfo.TotalCount=res.data.TotalCount;
            console.log(info.value);
            
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const Fan=(choose:any)=>{
        switch(choose){
            case 'F':
                pageInfo.value.PageIndex=1;
            break;
             case 'L':
                pageInfo.value.PageIndex--;
            break;
             case 'N':
                pageInfo.value.PageIndex++;
            break;
             case 'E':
                pageInfo.value.PageIndex=pageInfo.value.PageCount;
            break;
        }
    }

</script>
